import 'package:flutter/material.dart';

import '../constants.dart' show Constants, AppColors;

import './conversation_page.dart';
import './contacts_page.dart';
import './discover_page.dart';

enum ActionItems {
  GROUP_CHAT, ADD_FRIEND, QR_SCAN, PAYMENT, HELP
}

// tabbar
class NavigationIconView {
  final BottomNavigationBarItem item;

  NavigationIconView({Key key, String title, IconData icon, IconData activeIcon}) :
    item = BottomNavigationBarItem(
      icon: Icon(icon),
      activeIcon: Icon(activeIcon),
      title: Text(title),
      backgroundColor: Colors.white,
    );
}

class HomeScreen extends StatefulWidget {
  // @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  PageController _pageController;
  int _currentIndex = 0;
  List<NavigationIconView> _navigationViews;
  List<Widget> _pages;

// 底栏Tab板内容
  void initState() {
    super.initState();
    _navigationViews = [
      NavigationIconView(
        title: '微信',
        icon: IconData(
          0xe632,
          fontFamily: Constants.IconFontFamliy,
        ),
        activeIcon: IconData(
          0xe7e5,
          fontFamily: Constants.IconFontFamliy,
        ),
      ),
      NavigationIconView(
        title: '通讯录',
        icon: IconData(
          0xe7de,
          fontFamily: Constants.IconFontFamliy,
        ),
        activeIcon: IconData(
          0xe640,
          fontFamily: Constants.IconFontFamliy,
        ),
      ),
      NavigationIconView(
        title: '发现',
        icon: IconData(
          0xe609,
          fontFamily: Constants.IconFontFamliy,
        ),
        activeIcon: IconData(
          0xe603,
          fontFamily: Constants.IconFontFamliy,
        ),
      ),
      NavigationIconView(
        title: '我',
        icon: IconData(
          0xe629,
          fontFamily: Constants.IconFontFamliy,
        ),
        activeIcon: IconData(
          0xe60b,
          fontFamily: Constants.IconFontFamliy
        ),
      ),
    ];
    // 
    _pageController = PageController(initialPage: _currentIndex);
    // 在return中显示的四个页面
    _pages = [
      ConversationPage(),
      ContactsPage(),
      DiscoverPage(),
      Container(color: Colors.brown),
    ];
  }

// 右上下拉框行内容格式
  _buildPopMenuItem(int iconName, String title) {
    return Row(
      children: <Widget>[
        Icon(IconData(
          iconName,
          fontFamily: Constants.IconFontFamliy,
        ), size:22.0, color: const Color(AppColors.AppBarPopupMenuColor)),
        Container(width: 12.0),
        Text(title, style: TextStyle(color: const Color(AppColors.AppBarPopupMenuColor))),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    final BottomNavigationBar botNavBar = BottomNavigationBar(
      fixedColor: const Color(AppColors.TabIconAtive),//tabbar选中变色 简化方法
      items: _navigationViews.map((NavigationIconView view) {
        return view.item;
      }).toList(),
      currentIndex: _currentIndex,
      type: BottomNavigationBarType.fixed,
      onTap: (int index) {
        setState(() {   // 手动点击获取tab的index
          _currentIndex = index;

          _pageController.animateToPage(_currentIndex,//tabbar变化时的滑动效果
            duration: Duration(milliseconds: 200), curve: Curves.easeInOut);
        });
      }
    );
    return Scaffold(
      appBar: AppBar(
        title: Text('微信'),
        // backgroundColor: Color(0xff303030),或直接改main中添加Theme-ThemeData
        actions: [
          IconButton(
            icon: Icon(Icons.search, size: 24.0),
            onPressed: () {
              print('点击了搜索按钮');
            },
          ),
          Container(width: 4.0),
          // Container(
          //   padding: const EdgeInsets.only(right: 16.0),
          //   child:  IconButton( 真正控件
          //     icon: Icon(Icons.search, size: 22.0),
          //     onPressed: () {
          //       print('点击');
          //   },
          // ), 或者直接添加组件 如上

          // IconButton(
          //   icon: Icon(Icons.add, size: 28.0),
          //   onPressed: () {
          //     print('显示下拉列表');
          //   },
          // ), 换成下拉列表 如下
          PopupMenuButton(
            itemBuilder: (BuildContext context) {
              return <PopupMenuItem<ActionItems>>[
                PopupMenuItem(
                  child: _buildPopMenuItem(0xe632, "发起群聊"),
                  value: ActionItems.GROUP_CHAT,
                ),
                PopupMenuItem(
                  child: _buildPopMenuItem(0xe625, "添加朋友"),
                  value: ActionItems.ADD_FRIEND,
                ),
                PopupMenuItem(
                  child: _buildPopMenuItem(0xe891, "扫一扫"),
                  value: ActionItems.QR_SCAN,
                ),
                PopupMenuItem(
                  child: _buildPopMenuItem(0xe643, "收付款"),
                  value: ActionItems.PAYMENT,
                ),
                PopupMenuItem(
                  child: _buildPopMenuItem(0xe619, "帮助与反馈"),
                  value: ActionItems.HELP,
                ),
              ];
            },
            icon: Icon(Icons.add, size: 28.0),
            onSelected: (ActionItems selected) { print('点击的是$selected');},
          ),
          Container(width: 14.0),
        ],
      ),
      // body: Container(
      //   color: Colors.red,
      // ),
      // 滑动页内容
      body: PageView.builder(
        itemBuilder: (BuildContext context, int index) {
          return _pages[index];
        },
        controller: _pageController,
        itemCount: _pages.length,
        onPageChanged: (int index) {//页面改变时的回调函数，与tabbar点击联动
          setState(() {
            _currentIndex = index;//滑动联动
          });
        },
      ),
      bottomNavigationBar: botNavBar,
    );
  }
}